<template>
    <el-tabs v-model='activeName' @tab-click='handleClick' stretch>
        <el-tab-pane label='我要接单' name='我要接单' ref='List'>
            <List status='1' :data='list' :loadMore='moreLoading' @getMore='getMore'/>
        </el-tab-pane>
        <el-tab-pane label='待配送' name='待配送' ref='List'>
            <List status='2' :data='list' :loadMore='moreLoading' @getMore='getMore'/>
        </el-tab-pane>
        <el-tab-pane label='配送中' name='配送中' ref='List' >
            <List status='3' :data='list' :loadMore='moreLoading' @getMore='getMore'/>
        </el-tab-pane>
        <el-tab-pane label='已完成' name='已完成' ref='List'>
            <List status='4' :data='list' :loadMore='moreLoading' @getMore='getMore'/>
        </el-tab-pane>
    </el-tabs>
</template>
<script>
import List from './List'
import axios from 'axios'
let page = {
    pageSize: 10,
    pageNumber: 1,
    hasNext: true
}
export default {
    name: 'tab',
    components: {
        List
    },
    data() {
        return {
            activeName: '我要接单',
            status: '1',
            list: [],
            moreLoading: false
        }
    },
    created: function () {
        this.getMore()
    },
    methods: {
        getListbyPage(status) {
            const _this = this
            _this.moreLoading = true
            axios
                .get('/api/expressOrder/getOrderListByOpenId', {
                    params: {
                        status: this.status,
                        pageSize: page.pageSize,
                        pageNumber: page.pageNumber
                    }
                })
                .then(res => {
                    this.moreLoading = false
                    if (res.data.list.length !== 0) {
                        _this.list = _this.list.concat(res.data.list)
                        page.pageNumber++
                    } else {
                        page.hasNext = false
                    }
                })
                .catch(err => {
                    this.moreLoading = false
                    this.$message.error(err)
                })
        },
        handleClick(tab) {
            this.list = []
            page = {
                pageSize: 10,
                pageNumber: 1,
                hasNext: true
            }
            this.status = tab.index - 1
            this.getListbyPage(tab.index - 1)
        },
        getMore() {
            if (this.moreLoading) {
                return
            }
            this.moreLoading = true
            if (!page.hasNext) {
                this.moreLoading = false
            } else {
                this.getListbyPage(this.status)
            }
        }
    }
}
</script>
<style>
.infinite-loading{
    text-align: center;
    font-size: 1.2em;
    margin-top: 1rem;
}
.spinner{
    display: inline-block
}
.el-tabs__header {
    padding: 0;
    position: fixed;
    z-index: 1000;
    background: #fff;
    width: 100%;
}
.el-tabs__content{
    top: 4rem;
}
</style>